<template>
    <!--  搜索栏 -->
    <div class="app-container">
        <basic-search-form
                ref="vBasicSearchForm"
                style="margin-bottom: 8px"
                :columns="columns"
                inline
                size="small"
                @search="serach"
        >
            <template #shipType="{ formdata }">
                <el-select
                        v-model="formdata.shipType"
                        filterable
                        placeholder="请选择"
                        clearable
                        style="width: 100%"
                >
                    <el-option
                            v-for="item in shipTypeList"
                            :key="item.code"
                            :label="item.info"
                            :value="item.code"
                    />
                </el-select>
            </template>
        </basic-search-form>
        <!-- 表格 -->
        <basic-table
                ref="vBasicTable"
                :api="shipList"
                :immediate-fetch="false"
                :before-fetch="beforeFetch"
                :table-schema="tableSchema"
                :actions="tableActions"
                :table-prop="tableProp"
                :table-event="tableEvent"
                :row-info="{
        rowKey: 'data',
      }"
        >
            <template #stateStr="{ row }">
                <div style="text-align: center">
                    <el-tag type="success" size="small">{{ row.stateStr }}</el-tag>
                </div>
            </template>
            <!-- 表格上方按钮-->
            <template #tableHead="{ total }">
                <div>船舶统计：{{ total }}艘</div>
                <div style="height: 32px">
                    <el-button size="mini" type="primary" @click="addShip">新增船舶</el-button>
                    <el-button size="mini" @click="showUpdateCompanyDialog(null)">调整归属企业</el-button>
                    <el-button size="mini" @click="handleExport">导出EXCEL</el-button>
                </div>
            </template>
        </basic-table>
        <!--  调整归属企业弹窗  -->
        <update-company-dialog
                :initial-selected-ship="selectedShip"
                :initial-selected-ships="selectedShips"
                :company-list="companyList"
                :is-visible.sync="isUpdateCompanyDialogVisible"
                @updateCompanyCallBack="handleUpdateCompanyCallBack"
        ></update-company-dialog>
    </div>
</template>

<script>
    import { searchColumns, tableActions, tableSchema } from '@/views/platform/ship/list/modal.data';
    import dayjs from 'dayjs';
    import { download } from '@/utils/request';
    import { shipList } from '@/api/ship';
    import {
        getShipTypeList,
        getCompanyList,
        getOperateList,
        getCreateTypeList,
        getPlatformStateList,
    } from '@/api/common';
    import UpdateCompanyDialog from '@/views/platform/ship/list/components/UpdateCompanyDialog.vue';

    export default {
        components: { UpdateCompanyDialog },
        data() {
            return {
                columns: searchColumns(this),
                tableSchema: tableSchema,
                tableActions: tableActions(this.getShipDetail, this.updateShip, this.showUpdateCompanyDialog),
                tableProp: {},
                tableEvent: {
                    'selection-change': (selection) => {
                        this.selectedShips = selection.map((item) => item.id);
                    },
                },
                queryParams: {},
                detail: {},
                shipTypeList: [],
                companyList: [],
                operateList: [],
                createTypeList: [],
                platformStateList: [],
                isShowUpdateCompanyDialog: false,
                selectedShip: {},
                selectedShips: [],
                isUpdateCompanyDialogVisible: false,
            };
        },
        // computed: {
        //
        // },
        mounted() {
            this.getShipTypeList();
            this.getCompanyList();
            this.getOperateList();
            this.getCreateTypeList();
            this.getPlatformStateList();
            this.$refs.vBasicSearchForm.search();
        },
        methods: {
            shipList,
            serach(form) {
                console.log(form);
                this.queryParams = { ...form };
                this.$refs.vBasicTable.fetch();
            },
            beforeFetch(params) {
                let query = {
                    ...this.queryParams,
                    createBeginTime:
                        (this.queryParams.date?.[0] && dayjs(this.queryParams.date[0]).format('YYYY-MM-DD')) ||
                        null,
                    createEndTime:
                        (this.queryParams.date?.[0] && dayjs(this.queryParams.date[1]).format('YYYY-MM-DD')) ||
                        null,
                };
                delete query.date;
                return query;
            },
            /**
             * 详情
             * @param row
             */
            getShipDetail(row) {
                this.$router.push({ name: 'ShipDetail', query: { id: row.id } });
            },
            /**
             * 新增
             */
            addShip() {
                this.$router.push({ name: 'SaveShip' });
            },
            /**
             * 编辑
             * @param row
             */
            updateShip(row) {
                this.$router.push({ name: 'SaveShip', query: { id: row.id } });
            },
            showUpdateCompanyDialog(ship) {
                if (ship === null && this.selectedShips.length === 0) {
                    this.$message.error('请先选择一条或多条船舶');
                    return;
                }
                if (this.selectedShips.length === 0) {
                    this.selectedShip = ship;
                }
                this.isUpdateCompanyDialogVisible = true;
            },
            handleUpdateCompanyCallBack() {
                this.isUpdateCompanyDialogVisible = false;
                // 更新完成后的回调，比如刷新船舶列表等
                this.selectedShip = null;
                this.selectedShips = [];
                this.$refs.vBasicTable.fetch();
            },

            /**
             * 获取船舶类型下拉列表
             */
            getShipTypeList() {
                getShipTypeList().then((res) => {
                    this.shipTypeList = res.data;
                });
            },
            /**
             * 获取归属企业下拉列表
             */
            getCompanyList() {
                getCompanyList().then((res) => {
                    this.companyList = res.data;
                });
            },
            /**
             * 获取归属运营商下拉列表
             */
            getOperateList() {
                getOperateList().then((res) => {
                    this.operateList = res.data.operateList;
                });
            },
            /**
             * 获取创建方式下拉列表
             */
            getCreateTypeList() {
                getCreateTypeList().then((res) => {
                    this.createTypeList = res.data;
                });
            },
            /**
             * 获取平台状态下拉列表
             */
            getPlatformStateList() {
                getPlatformStateList().then((res) => {
                    this.platformStateList = res.data;
                });
            },
            /**
             * 导出
             */
            handleExport() {
                download('/ship/export', { ...this.queryParams }, `船舶列表_${new Date().getTime()}.xlsx`);
            },
        },
    };
</script>

<style lang="scss" scoped>
    .app-container {
        background-color: #f1f1f1;
    }
</style>
